<template>
  <!-- 热门评论 -->
  <div class="content" v-if="data !== null"
    :style="openItem.openItem === false || openItem === false ? 'margin:0 auto' : ''">
    <div v-if="openItem.openItem === false || openItem === false" class="title2">{{ title }}</div>
    <div class="back" @click="back" v-if="openItem.openItem === false || openItem === false"><i
        class="el-icon-back"></i>
    </div>
    <div class="edit" @click="open()">
      <div class="editC"><i class="el-icon-edit"></i>写评论</div>
    </div>

    <div class="hotTitle" v-if="hotData !== null">热门评论</div>
    <div v-for="item in hotData" :key="item.userId" class="contentDesc">
      <div class="avatarUrl">
        <el-image lazy :src="item.user.avatarUrl" @click="userInfo(item.user)" />
      </div>
      <div class="top">
        <div class="userDesc">
          <!-- <div class="nickname"></div> -->
          <div class="Desc">{{ item.user.nickname }}:{{ item.content }}</div>
        </div>
      </div>
      <div class="right">
        <div class="timeIcon">
          <div class="time">{{ item.time | dateFormat }}</div>
          <!-- 回复评论 -->
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <div class="el-icon-chat-dot-square"></div>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-input type="textarea" placeholder="请输入内容" v-model="textarea2" maxlength="140" show-word-limit
                size="medium" style="margin-bottom: 10px; width: 500px"></el-input>
              <el-button type="danger" size="medium" style="margin-bottom: 10px; margin-left: 10px"
                @click="restore(item.commentId)">评论</el-button>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 最新评论开始 -->
    <div class="title" style="margin-top: 20px">最新评论({{ count }})</div>
    <div v-for="(item, i) in data" :key="i" class="contentDesc">
      <div class="avatarUrl">
        <el-image lazy :src="item.user.avatarUrl" @click="userInfo(item.user)" />
      </div>
      <div class="top">
        <div class="userDesc">
          <!-- <div class="nickname"></div> -->
          <div class="Desc">{{ item.user.nickname }}:{{ item.content }}</div>
        </div>
      </div>

      <div class="right">
        <div class="timeIcon">
          <div class="time">{{ item.time | dateFormat }}</div>

          <!-- 回复评论 -->
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <div class="el-icon-chat-dot-square"></div>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-input type="textarea" placeholder="请输入内容" v-model="textarea2" maxlength="140" show-word-limit
                size="medium" style="margin-bottom: 10px; width: 500px"></el-input>
              <el-button type="danger" size="medium" style="margin-bottom: 10px; margin-left: 10px"
                @click="restore(item.commentId)">评论</el-button>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 子评论开始 -->
        <div v-for="(item, i) in item.beReplied" :key="i" class="contentDescTwo">
          <!-- 查看子评论 -->
          <div class="userDescTwo">
            <div class="avatarUrlTwo">
              <el-image lazy :src="item.user.avatarUrl" @click="userInfo(item.user)"></el-image>
            </div>
            <!-- <div class="nickname"></div> -->
            <div class="Desc">{{ item.user.nickname }}:{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器开始 -->
    <div class="block">
      <el-pagination background="" @current-change="handleCurrentChange" :page-size="20"
        layout="total , prev, pager, next" :total="count">
      </el-pagination>
    </div>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :modal="false">
      <el-input type="textarea" placeholder="请输入内容" v-model="textarea1" maxlength="140" show-word-limit size="medium"
        style="margin-bottom: 10px; width: 100%"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="send()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import debounce from "@/utils/debounce.js";
export default {
  computed: {
    ...mapState(['nowPlaySong', 'openItem']),
  },
  mounted() {
    if (this.openItem.openItem === false) {
      this.id = window.sessionStorage.getItem('songID')
      this.title = window.sessionStorage.getItem('songName')
      this.getData(this.id)
    } else if (this.openItem === false) {
      this.id = window.sessionStorage.getItem('songID')
      this.title = window.sessionStorage.getItem('songName')
      this.getData(this.id)
    } else {
      this.getData(this.nowPlaySong.songId);
      this.id = this.nowPlaySong.songId;
      this.title = this.nowPlaySong.title;
    }
  },

  watch: {
    nowPlaySong(newVal, oldVal) {
      this.id = newVal.songId;
      this.getData(newVal.songId);
      this.title = newVal.title;
    },
  },
  data() {
    return {
      limit: 20, // 单页数量
      offset: 0, // 页数
      textarea1: '', // 评论内容
      textarea2: '', // 回复内容
      data: null,
      hotData: null,
      count: 0,
      id: null,
      title: '',
      dialogVisible: false,
      timer: null,
    };
  },
  methods: {
    ...mapActions(['saveUserId']),
    async getData(e) {
      this.$api
        .musicCom({ id: e, limit: this.limit, offset: this.offset, timestamp: this.$utils.timestamp(), cookie: localStorage.getItem('cookie') })
        .then((ret) => {
          this.data = ret.comments;
          if (ret.hotComments.length > 0) {
            this.hotData = ret.hotComments;
          }
          this.count = ret.total;
        });
    },

    // 翻页
    handleCurrentChange: debounce(function (e) {
      this.offset = (e - 1) * 20;
      if (this.offset > this.count) {
        this.offset = (e - 1) * 20 - (this.offset - this.count) - 1;
        this.getData(this.id);
      } else {
        this.getData(this.id);
      }
       
    }, 1000),

    // 给歌曲发送评论
    async send() {
      if (localStorage.getItem('cookie') === null) {
        this.$message.error('需要登录!!!');
      } else if (this.textarea1 === '') {
        this.$message.error('评论内容不能为空!!!');
      } else {
        this.$api
          .sendComment({
            type: 0, // 歌曲模式
            id: this.id,
            content: this.textarea1,
            cookie: localStorage.getItem('cookie'),
            timestamp: this.$utils.timestamp(),
          })
          .then((ret) => {
            this.$message({
              message: '评论成功',
              type: 'success',
            });
            this.textarea1 = '';
            this.timer = setTimeout(() => {
              this.getData(this.id);
            }, 500);
          });
      }
    },

    // 回复评论
    async restore(e) {
      if (localStorage.getItem('cookie') === null) {
        this.$message.error('需要登录!!!');
      } else if (this.textarea2 === '') {
        this.$message.error('回复内容不能为空!!!');
      } else {
        this.$api
          .resComment({
            type: 0,
            id: this.id,
            content: this.textarea2,
            commentId: e,
            cookie: localStorage.getItem('cookie'),
            timestamp: this.$utils.timestamp(),
          })
          .then((ret) => {
            if (ret.code !== 200) {
              this.$message.error('操作失败');
            } else {
              this.$message({
                message: '回复成功',
                type: 'success',
              });
              this.textarea2 = '';
              this.dialogVisible = false;
              this.timer = setTimeout(() => {
                this.getData(this.id);
              }, 500);
            }
          });
      }
    },

    open() {
      this.dialogVisible = true;
    },

    back() {
      this.$router.go(-1);
    },

    userInfo(e) {
      this.saveUserId({ userid: e.userId })
      this.$router.push('/userPage');
    }
  },
};
</script>

<style scoped>
.head {
  display: flex;
  justify-content: end;
  flex-direction: column;
  position: relative;
}

.head .el-button {
  width: 80px;
}

.content {
  margin-top: 40px;
  margin-bottom: 80px !important;
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 80px auto 100px;
  position: relative;
}

.top {
  display: flex;
  margin-left: 60px;
  align-items: center;
}

.title,
.hotTitle {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

.title2 {
  text-align: center;
  font-size: 30px;
}

.contentDesc {
  margin-bottom: 20px;
  position: relative;
  border-bottom: 1px solid rgba(230, 230, 230, 0);
}

.contentDescTwo {
  width: 100%;
  position: relative;
  background: gainsboro;
  border-radius: 10px;
}

.avatarUrlTwo .el-image {
  width: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.avatarUrl .el-image {
  position: absolute;
  width: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.right {
  display: flex;
  flex-direction: column;
}

.userDesc {
  display: flex;
  margin-bottom: 20px;
}

.userDescTwo {
  display: flex;
  align-items: center;
}

.el-icon-chat-dot-square {
  font-size: 20px;
}

.timeIcon {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #000000;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}

.block {
  display: flex;
  justify-content: center;
}

.el-dropdown-menu {
  padding: 20px;
}

.time {
  height: 100%;
  margin-left: 60px;
}

.edit {
  position: fixed;
  bottom: 70px;
  z-index: 20;
  background: #808080;
  height: 40px;
  width: 100px;
  right: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  color: #fff;
}

.back {
  font-size: 30px;
}
</style>
